<template>
  <view class="popBox">
    <view class="popBody">
      <view class="head">
        <view class="title">{{ title }}</view>
      </view>
      <view class="popCon">
        <rich-text :nodes="content" bindtap="tap"></rich-text>
      </view>
      <view class="popFoot">
        <!-- <view class="spans close" @click="close">取消</view> -->
        <view class="spans center" @click="center">关闭</view>
      </view>
    </view>
  </view>
</template>

<script>
/**
 * 搜索组件
 */
export default {
  props: {
    // 是否展示搜索按钮
    title: {
      type: String,
      default: '标题'
    },
    content: {
      type: String,
      default: '内容'
    }
  },
  data() {
    return {
      nodes: '<div><a href = "#">sadf</a></div>'
    };
  },

  methods: {
    close() {
      console.log('关闭');
      this.$emit('popClose');
    },
    center() {
      this.$emit('popCenter');
      console.log('确认');
    }
  }
};
</script>

<style lang="scss">
.popBox {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 9;
  .popBody {
    position: fixed;
    background-color: #fff;
    border-radius: 24rpx;
    width: 700rpx;
    height: auto;
    max-height: 90%;
    margin: 0 auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    overflow-y: scroll;
    .head {
      padding: 24rpx;
      text-align: center;
      background-color: #f3f3f3;
      font-size: 32rpx;
    }
    .popCon {
      padding: 24rpx;
      font-size: 28rpx;
      margin-bottom: 50rpx;
    }
    .popFoot {
      display: flex;
      // position: absolute;
      // bottom: 0;
      // left: 0;
      width: 100%;
      .spans {
        flex: 1;
        padding: 18rpx 28rpx;
        text-align: center;
      }
      .close {
        background-color: #f3f3f3;
      }
      .center {
        background-color: #f34e1c;
        color: #fff;
      }
    }
  }
}
.text {
  color: rgba(0, 0, 0, 0.55);
  padding: 10rpx;
}
</style>
